<template>
 <div class="container">
    <h1 class="error">404</h1>
    <p class="hint">当前访问路由未定义或不匹配</p>
</div>
</template>

<script>

export default {
  name: 'Page404',
  computed: {
    message() {
      return 'The webmaster said that you can not enter this page...'
    }
  }
}
</script>

<style lang="scss" scoped>
 html{
        height: 100%;
        background-color: #F8F8F8;
    }
    *{padding: 0;margin: 0;}
    body{
        height: 100%;
    }
    .container{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #FF5812;
    }
    .container .error{
        font-size: 100px;
        font-weight: 700;
        text-shadow: 2px 2px 0 #f5f6fa, 4px 4px 0 #FF5812;
        color: #FF5812;
    }
    .container .hint{
        font-size: 14px;
    }
</style>
